import NavBar from "../components/commons/navbar/NavBar.tsx";
import SideBarProfile from "../components/profile/SideBarProfile.tsx";


import "../styles/modules/profile.css"
import FAB from "../components/commons/FAB.tsx";
import {useNavigate} from "react-router-dom";
import PageFacade from "../components/profile/PageFacade.tsx";
import {PageType} from "../components/profile/PageType.ts";
import {useEffect, useState} from "react";
import {UserAccount} from "../model/UserAccount.ts";
import axios from "axios";
import {baseUrl} from "../settings/Settings.ts";


const ProfilePage = () => {

    const navigate = useNavigate()

    const [fragmentType, setFragmentType] = useState(PageType.LIBRARY)
    const handleClick = () => {
        navigate("/library")

    }

    const [account, setAccount] = useState<UserAccount>()



    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await axios.get(`${baseUrl}/api/account/info`, {
                    withCredentials: true, // send credentials with the request
                    headers: {
                        'Content-Type': 'application/json'
                    }
                });

                const data = response.data;
                if (response.status === 200) {
                    setAccount(data.account);

                } else {
                    navigate('/login')
                }

            } catch (error) {
                console.error('Error fetching data');
            }
        };

        fetchData();
    }, []);


    function updateContent(pageType: PageType) {
        setFragmentType(pageType)
    }
    return (
        <>
            <NavBar/>

            <main className="d-flex flex-nowrap overflow-y-scroll">
                <SideBarProfile updateContent={updateContent}/>
                <PageFacade pageType={fragmentType}/>
                <FAB clickHandler={handleClick} img={"M8 2a.5.5 0 0 1 .5.5v5h5a.5.5 0 0 1 0 1h-5v5a.5.5 0 0 1-1 0v-5h-5a.5.5 0 0 1 0-1h5v-5A.5.5 0 0 1 8 2"} />
            </main>


        </>
    )
}
export default ProfilePage